<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>郊狼惩罚姬 - 吐槽弹幕</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4D9E', // 通道A主色
                        secondary: '#36BFFA', // 通道B主色
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .transparent-bg {
                background-color: rgba(0, 0, 0, 0);
            }
            .danmaku {
                animation: slideIn 0.5s ease forwards, fadeOut 0.5s ease 3s forwards;
            }
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gray-900/50 flex items-center justify-center p-4 overflow-hidden">
    <!-- 弹幕容器 -->
    <div id="danmaku-container" class="fixed top-0 right-0 w-96 h-full flex flex-col-reverse items-end p-4 space-y-3 pointer-events-none z-50"></div>

    <script>
        // 定义不同强度区间的吐槽语句
        const insults = {
            low: ['杂鱼', '弱不禁风', '就这？', '太逊了', '不堪一击'],
            medium: ['还不够', '继续努力', '一般般', '勉强及格', '有待提高'],
            high: ['不错嘛', '有两下子', '还可以', '挺厉害', '值得认可'],
            veryHigh: ['好强', '了不起', '令人惊叹', '实力超群', '无敌']
        };

        // 存储上一次的值，用于检测变化
        let lastAValue = null;
        let lastBValue = null;

        // 根据百分比获取随机吐槽
        function getRandomInsult(percentage) {
            let category;

            if (percentage < 25) {
                category = 'low';
            } else if (percentage < 50) {
                category = 'medium';
            } else if (percentage < 75) {
                category = 'high';
            } else {
                category = 'veryHigh';
            }

            const insultsList = insults[category];
            return insultsList[Math.floor(Math.random() * insultsList.length)];
        }

        // 创建弹幕
        function createDanmaku(channel, text, color) {
            const container = document.getElementById('danmaku-container');

            // 创建弹幕元素
            const danmaku = document.createElement('div');
            danmaku.className = 'danmaku bg-gray-800/90 text-white p-4 rounded-lg shadow-lg w-full flex items-center';

            // 设置内容
            danmaku.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
                    <span class="font-bold text-lg">${channel}</span>
                </div>
                <div class="flex-1">
                    <p class="text-lg font-bold" style="color: ${color}">${text}</p>
                </div>
            `;

            // 添加到容器
            container.prepend(danmaku);

            // 设置定时器，3秒后移除
            setTimeout(() => {
                container.removeChild(danmaku);
            }, 3500);
        }

        // 数据获取逻辑
        function refreshPage() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    // 检测值是否变化并创建弹幕
                    if (data.a_channel !== lastAValue) {
                        const aPercent = (data.a_channel / data.a_channel_max) * 100;
                        createDanmaku('A', getRandomInsult(aPercent), '#FF4D9E');
                        lastAValue = data.a_channel;
                    }

                    if (data.b_channel !== lastBValue) {
                        const bPercent = (data.b_channel / data.b_channel_max) * 100;
                        createDanmaku('B', getRandomInsult(bPercent), '#36BFFA');
                        lastBValue = data.b_channel;
                    }

                    // 计划下一次刷新
                    setTimeout(refreshPage, 500);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    // 失败后重试
                    setTimeout(refreshPage, 2000);
                });
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 启动数据刷新
            setTimeout(refreshPage, 1000);
        });
    </script>
</body>
</html>